<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Access-Control-Allow-Origin" content="anonymous">
<title>locstorage 图片存储</title>
</head>

<body>

 <!--image1-->
 <img id="acc" src="about:blank" alt="A close up of an elephant">
  
</body>
</html>
<script>
<!--image1-->
var gsFiles = JSON.parse(localStorage.getItem("gsFiles")) || {};
var a = document.getElementById("acc");
gsFilesDate = gsFiles.date;

 date = new Date();
 todaysDate = (date.getMonth() + 1).toString() + date.getDate().toString();

// 检查数据，如果不存在或者数据过期，则创建一个本地存储
if (typeof gsFilesDate === "undefined" || gsFilesDate < todaysDate) {

 // 图片加载完成后执行
 
 <!--image1-->
 a.addEventListener("load", function () {

 var imgCanvas = document.createElement("canvas");
 imgContext = imgCanvas.getContext("2d");
// 确保canvas尺寸和图片一致
 imgCanvas.width = a.width;
 imgCanvas.height = a.height;
// 在canvas中绘制图片
 imgContext.drawImage(a, 0, 0, a.width, a.height);

// 将图片保存为Data URI
 gsFiles.a = imgCanvas.toDataURL("http://dlovel.com/upload/Article/2017220163457320.jpg");

gsFiles.date = todaysDate;

// 将JSON保存到本地存储中
try {
localStorage.setItem("gsFiles", JSON.stringify(gsFiles));

}
catch (e) {
console.log("Storage failed: " + e);
}
}, false);
// 设置图片
a.setAttribute("src", "http://dlovel.com/upload/Article/2017220163457320.jpg");
}
else {
// Use image from localStorage
a.setAttribute("src", gsFiles.a);
}
</script>